<template>
  <div class="menu-container">
    <!-- 左侧菜单 -->
    <div class="primary-menu" :class="{ 'collapsed': isCollapsed }">

      <!-- 收起按钮 -->
      <div class="collapse-trigger" @click="toggleCollapse">
        <el-icon>
          <component :is="isCollapsed ? 'DArrowRight' : 'DArrowLeft'" />
        </el-icon>
      </div>

      <!-- 菜单列表 -->
      <el-scrollbar class="menu-scrollbar">
        <el-menu 
          :default-active="activeMenu" 
          :collapse="isCollapsed"
          :unique-opened="true"
          :collapse-transition="false"
          class="menu-list"
          router
          background-color="var(--menu-bg-color)"
          text-color="var(--menu-text-color)"
          active-text-color="var(--menu-active-color)">
          <div v-for="(route, index) in menuList" :key="index" class="menu-item-wrapper">
            <el-menu-item v-if="!route.children" :index="route.path">
              <el-icon>
                <component :is="route.meta?.icon" />
              </el-icon>
              <template #title>
                <span class="menu-title">{{ route.meta?.title }}</span>
              </template>
            </el-menu-item>

            <el-sub-menu v-else :index="route.path">
              <template #title>
                <el-icon>
                  <component :is="route.meta?.icon" />
                </el-icon>
                <span class="menu-title">{{ route.meta?.title }}</span>
              </template>
              <el-menu-item 
                v-for="(subMenu, subIndex) in route.children" 
                :key="subIndex"
                :index="subMenu.path"
                class="sub-menu-item">
                <template #title>{{ subMenu.meta?.title }}</template>
              </el-menu-item>
            </el-sub-menu>
          </div>
        </el-menu>
      </el-scrollbar>
      
      <!-- 底部信息 -->
      <div class="menu-footer" v-if="!isCollapsed">
        <span>西安人影云平台</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { staticRoutes } from '@/router/modules/staticRouter'

const router = useRouter()
const route = useRoute()


// 菜单展开/收起状态
const isCollapsed = ref(false)

// 当前选中的菜单
const activeMenu = computed(() => route.path)

// 切换菜单展开/收起
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  localStorage.setItem('menuCollapsed', isCollapsed.value ? '1' : '0')
}

// 从路由中获取菜单数据
const menuList = computed(() => {
  // 获取主布局下的子路由作为菜单
  const layout = staticRoutes.find(item => item.name === 'Layout')
  if (layout && layout.children) {
    // 过滤掉不在菜单中显示的路由
    return layout.children.filter(item => item.meta?.isHide === '1')
  }
  return []
})

// 初始化
onMounted(() => {
  // 从本地存储恢复菜单状态
  const savedCollapsed = localStorage.getItem('menuCollapsed')
  if (savedCollapsed !== null) {
    isCollapsed.value = savedCollapsed === '1'
  }
})

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    // 可以在这里处理路由变化后的逻辑
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.menu-container {
  --menu-bg-color: #E0E3E9;
  --menu-bg-hover: #E6F1FF;
  --menu-text-color: #505968;
  --menu-active-color: #2B6DE5;
  --menu-active-bg: #E6F1FF;
  --menu-border-radius: 6px;
  --menu-width: 200px;
  --menu-collapse-width: 60px;
  
  display: flex;
  height: 100%;
  z-index: 10;
  position: relative;
}

.primary-menu {
  width: var(--menu-width);
  height: 100%;
  background: var(--menu-bg-color);
  border-right: 1px solid #E4E7ED;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  
  &.collapsed {
    width: var(--menu-collapse-width);
    
    .menu-footer {
      opacity: 0;
    }
    
    .collapse-trigger {
      margin: 8px auto;
      width: 28px;
      height: 28px;
    }
  }
  
  .collapse-trigger {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    margin: 8px;
    color: #2B6DE5;
    border-radius: 4px;
    
    &:hover {
      color: var(--menu-active-color);
      background-color: #D7E8FF;
    }
  }
  
  .menu-scrollbar {
    flex: 1;
    overflow-x: hidden;
    
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.1);
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
  
  .menu-item-wrapper {
    padding: 0 4px;
  }
  
  .menu-list {
    border-right: none;
    background-color: transparent;
    
    .menu-title {
      font-size: 13px;
    }
    
    :deep(.el-menu) {
      background-color: transparent;
    }
    
    :deep(.el-menu-item.is-active) {
      background-color: var(--menu-active-bg);
      color: var(--menu-active-color);
      font-weight: 500;
      border-radius: var(--menu-border-radius);
      box-shadow: 0 2px 6px rgba(43, 109, 229, 0.2);
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background-color: var(--menu-active-color);
        border-radius: 0 2px 2px 0;
      }

      .el-icon {
        color: var(--menu-active-color);
      }
    }
    
    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
      height: 44px;
      line-height: 44px;
      margin: 4px 0;
      border-radius: var(--menu-border-radius);
      
      &:hover {
        background-color: var(--menu-bg-hover);
      }
    }
    
    :deep(.el-sub-menu) {
      .el-menu {
        padding: 0 0 0 4px;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        margin: 0 4px 4px 4px;
      }
      
      .el-menu-item {
        min-width: 0;
        padding-left: 40px !important;
        height: 40px;
        line-height: 40px;
        margin: 2px 0;

        &:hover {
          color: var(--menu-active-color);
        }
      }
    }
    
    :deep(.el-icon) {
      font-size: 16px;
      margin-right: 8px;
    }
  }
  
  .menu-footer {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color:var(--menu-active-color);
    transition: opacity 0.3s;
    background-color: rgba(0, 0, 0, 0.05);
    margin: 8px;
    border-radius: 4px;
  }
}
</style>